<template>
  <div class="app-container">
    <el-form inline label-width="70px" size="small" class="query-form">
      <el-form-item label="服务名">
        <el-input clearable v-model="listQuery.appName" />
      </el-form-item>
      <el-form-item label="方法名">
        <el-input clearable v-model="listQuery.methodName" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="listQuery.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="listQuery.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="日志级别">
        <el-select clearable v-model="listQuery.logLevel" placeholder="请选择">
          <el-option
            v-for="item in levelList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="限制数">
        <input-number clearable v-model="listQuery.limitNum"></input-number>
      </el-form-item>
      <el-form-item label="内容">
        <el-input clearable v-model="listQuery.logContent" />
      </el-form-item>
      <el-form-item label="租户">
        <el-input clearable v-model="listQuery.tenantId" />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" size="small" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <dynamic-table
      ref="table"
      v-loading="listLoading"
      size="small"
      :data="list"
      border
      fit
      row-key="tmpId"
      style="width: 100%;"
      :columns="columns"
      :page-options="pageOptions"
      :load-method="getTableData"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
    </dynamic-table>
    <comm-dialog
      ref="dialog"
      :component="dialogComponent"
    >
    </comm-dialog>
  </div>
</template>
<script>
import DynamicTable from '@/components/DynamicTable'
import {getBusinessLogList} from '@/api/log-trace'
import {LOG_LEVEL} from '@/enume/level'
import CommDialog from './components/CommDialog'
import clipboard from '@/utils/clipboard'
import InputNumber from '@/components/form/InputNumber'
export default {
  name: 'Business',
  components: { DynamicTable, CommDialog, InputNumber },
  props: {
    query: {
      type: Object,
      default() {
        return {
          traceId: ''
        }
      }
    }
  },
  data() {
    let self = this
    return {
      levelList: LOG_LEVEL,
      dialogComponent: 'Sql',
      listQuery: {
        appName: '',
        startTime: '',
        endTime: '',
        methodName: '',
        logLevel: '',
        limitNum: ''
      },
      list: [],
      listLoading: false,
      pageOptions: {
        isShowPage: true
      },
      columns: [[
        {
          prop: 'appName',
          headerAlign: 'center',
          label: '服务',
          wdth: '60px',
          body(scope) {
            return {
              component: 'TypeHtml',
              bind: {
                html() {
                  if (scope.row.selected) {
                    return scope.row.appName
                  } else {
                    return `<span style='color: #999'>${scope.row.appName}</span>`
                  }
                }
              }
            }
          }
        },
        {
          prop: 'method',
          label: '方法全路径',
          minWidth: '150px'
        },
        {
          prop: 'occurTime',
          label: '发生时间',
          width: '140px',
          align: 'center'
        },
        {
          prop: 'args',
          label: '参数',
          width: '120px'
        },
        {
          prop: 'result',
          label: '结果',
          width: '40px'
        },
        {
          prop: 'level',
          label: '级别',
          width: '70px',
          align: 'center',
          body(scope) {
            let obj = LOG_LEVEL.filter(el => el.value === scope.row.level)[0] || {}
            return {
              component: 'TypeTag',
              bind: {
                type: obj.style,
                size: 'small',
                name: obj.label
              }
            }
          }
        },
        {
          prop: 'logDetailInfo',
          label: '内容',
          minWidth: '140px'
        },
        {
          prop: '',
          label: '操作',
          width: 160,
          align: 'center',
          body(scope) {
            let buttons = [
              {
                bind: {
                  type: 'text',
                  size: 'small',
                  name: '复制内容'
                },
                on: {
                  click(evt) {
                    clipboard(scope.row.logDetailInfo || ' ', evt)
                  }
                }
              },
              {
                bind: {
                  type: 'text',
                  size: 'small',
                  name: '调用链'
                },
                on: {
                  click() {
                    self.$router.push({path: '/log-trace/call-chain-detail', query: {topTraceId: scope.row.topTraceId}})
                    // self.dialogComponent = 'CallChainDetail'
                    // self.openSqlDialog({
                    //   query: {
                    //     topTraceId: scope.row.topTraceId
                    //   }
                    // })
                  }
                }
              },
              {
                bind: {
                  type: 'text',
                  size: 'small',
                  name: 'sql日志'
                },
                on: {
                  click() {
                    self.dialogComponent = 'Sql'
                    self.$router.push({path: '/log-trace/sql', query: {traceId: scope.row.traceId}})
                    // self.openSqlDialog({
                    //   query: {
                    //     traceId: scope.row.traceId
                    //   }
                    // })
                  }
                }
              }
            ]
            if (!scope.row.rowspan) buttons = [buttons[0]]
            return {
              component: 'TypeButtons',
              bind: {
                buttons: buttons
              }
            }
          }
        }
      ]]
    }
  },
  mounted() {
    if (this.$route.query.traceId) {
      this.listQuery.traceId = this.$route.query.traceId
      this.queryTableData()
    } else if (this.isDialog) {
      this.listQuery.traceId = this.query.traceId
      this.queryTableData()
    }
  },
  methods: {
    /**
     * 获取表格数据
     */
    async getTableData(param) {
      let params = {
        ...this.listQuery,
        pageNum: param.currentPage,
        pageSize: param.pageSize
      }
      try {
        let {data} = await getBusinessLogList(params) || {}
        let list = data.list
        let arr = []
        // 数据结构重构
        if (list) {
          list.forEach((el, j) => {
            let obj = {...el, tmpIndex: j + 1}
            delete obj.businessLogList
            el.businessLogList.forEach((item, index) => {
              let temp = {...item, tmpId: j + '-' + index}
              if (index === 0) {
                temp.rowspan = el.businessLogList.length
                obj = temp
              } else {
                obj.children = obj.children || []
                obj.children.push(temp)
              }
            })
            arr.push(obj)
          })
        }
        this.list = arr
        return data
      } catch (e) {}
    },
    /**
     * 查询
     */
    search() {
      this.listQuery.traceId = ''
      this.queryTableData()
    },
    queryTableData() {
      this.$refs.table.queryPageData()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.rowspan) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    openSqlDialog(param) { // 打开sql明细弹框
      this.$refs.dialog.open({
        dialog: {
          title: 'sql日志',
          width: '85%'
        },
        component: param
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
